import React, { Component } from 'react'
// 方法二：类的外部写法
// const styleObj = {
//   width: 300,
//   height: '150px',
//   background: '#ccc',
//   border: '2px',
//   margin: '300px auto'
// }
export default class Login extends Component {
  state = {
    username: '',
    password: ''
  }

  //方法三：实例属性写法
  styleObj2 = {
    width: 300,
    height: '150px',
    background: '#ccc',
    border: '2px',
    margin: '300px auto'
  }

  login = () => {
    console.log('---login---')
  }

  changeUsername = e => {
    this.setState({
      username: e.target.value
    })
  }

  password = e => {
    this.setState({
      password: e.target.value
    })
  }

  // 优化
  change = e => {
    this.setState({
      // 如果属性名是动态的，用属性名表达式
      //[e.target.name] 属性名表达式
      [e.target.name]: e.target.value
    })
  }
  render () {
    const { username, password } = this.state
    console.log(username, password)
    return (
      <div
        //方法一：行内样式写法（只有行内样式有代码提示）
        // style={{
        //   width: 300,
        //   height: '150px',
        //   background: '#ccc',
        //   border: '2px',
        //   margin: '300px auto'
        // }}

        // style={styleObj} //方法二：类的外部写法

        style={this.styleObj2} //方法三：实例属性写法
      >
        <p>
          用户名:
          <input
            type='text'
            name='username'
            value={username}
            onChange={this.change}
          />
        </p>
        <p>
          密码:
          <input
            type='text'
            name='password'
            value={password}
            onChange={this.change}
          />
        </p>
        <p>
          <button onClick={this.login}>登录</button>
        </p>
      </div>
    )
  }
}
